<template>
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')">

	</page-meta>
	<view class="" style="background: #F8F9FA;height: 100%;">
		<!-- <call-nav-bar title="客服中心">
		</call-nav-bar> -->

		<z-paging ref="paging" v-model="msgList" @query="getChatHistory" use-chat-record-mode safe-area-inset-bottom
			bottom-bg-color="#f8f8f8">
		
			
			<view class="mar" v-for="(item,index) in msgList" :key="'msg' + index" :id="'msg' + index" style="width: 90%;">
				<view style="transform: scaleY(-1);">
					<view class=" d-j-center " v-if="shouldDisplayTime(item.updatedAt,index)">
						<view class="box d-center white-font time-c" style="">
							{{item.updatedAt}}
						</view>
					</view>
					<view class="d-a-center msg" :class="item.roleType==0?'':'d-j-end'">
						<view class="" v-show="item.roleType==0">
							<image :src="kefuAvatar" class="qu-g yuan" mode=""></image>
						</view>
						<!-- 0是客服，1是用户 -->
						<!-- 文字 -->
						<view v-if="item.messageType==0" class="box msg-box br-b text-a "
							:class="item.roleType==0?'white-bac co-f':'blue-bac co-white'">
							{{item.message}}
						</view>
						<!-- 卡片 -->
						<view class="" v-if="item.messageType==1" style="width: 80%;"
							:style="item.roleType!=0?'margin-right:2%':''">
							<user-card :key="message.number" actionName='onlyone' :messageTemplate='2'
								:listInfo='item.message' />
						</view>
						<!-- 图片 -->
						<view class="wid-ten" :class="item.messageType==2&&item.roleType==0?'':'d-j-end'"
							v-if="item.messageType==2" style="padding-right: 20rpx;">
							<image class=" d-j-end" :src="item.message" @click="previewImage(item.message,index)"
								mode="aspectFit" style="height: 200rpx;width: 200rpx">
							</image>
						</view>
						<view class="" v-show="item.roleType==2">
							<image :src="userAvatar" class="qu-g yuan" mode=""></image>
						</view>
					</view>
				</view>
				
			</view>
			<!-- <view style="transform: scaleY(-1);">
				<uni-load-more :status="isMore" :contentText='contentText' @clickLoadMore="pushMoreList"
					v-if="msgList.length>=10"></uni-load-more>
			</view> -->
			
			
			<view style="transform: scaleY(-1);">
				<!-- 猜你想问-->
				<view class="mar mar-t menu-ll br-a white-bac box " style="padding: 0 3% 0 3%;width: 90%;">
					<view class="menu-t font-wl" style="padding: 3% 0 3% 0;">
						猜你想问
					</view>
					<view class="menu-tl font-w tl d-a-center d-j-bet" v-for="(item,index) in questionList" :key="index"
						style="height: 90rpx;" @click="sendMessage(item.title,0)">
						<view class="">
							{{item.title}}
						</view>
						<view class="">
							<image src="http://loto.oss-cn-shanghai.aliyuncs.com/email/d0d847290a934545.png"
								class="qu-b" mode=""></image>
						</view>
					</view>
					<!-- 换一换 -->
					<view class="menu-c font-w d-a-center" style="height: 100rpx;" @click="questionTem()">
						<image src="http://loto.oss-cn-shanghai.aliyuncs.com/email/02a7bfd30fc44303.png" class="qu-e"
							mode="" style="margin-right: 2%;"></image>
						换一换
					</view>
				</view>
			</view>
			<view style="transform: scaleY(-1);">
				<view class="mar-t d-j-around d-a-center menu-l br-a white-bac mar" style="width: 90%;">
					<view class="" v-for="(item,index) in menuList" :key="index" style="width: 25%;"
						@click="toActionName(index)">
						<view class="d-center">
							<image :src="item.icon" class="qu-f" mode="" style=""></image>
						</view>
						<view class="d-center icon-img font-w" style="margin-top: 10rpx;">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			
			<view style="transform: scaleY(-1);">
				<view class="d-a-center">
					<view class="mar box first-box text-d co-f" style="margin-top: 3%;">
						Hi~{{nick}} 小鹿专属客服为您服务
					</view>
				</view>
			</view>
			
			
			
			<!-- 切换订单 -->
			
			<!-- <view class="mar box change-order text-d co-f" style="margin-top: 0;">
						如需咨询其他订单，可点击“<text class="co-l" @click="toChangeOrder(0)">切换订单</text>”
					</view> -->
			<!-- <view class="" :class="isOpenPic?'sty1':'sty2'" id="targetView">
			</view> -->

			<template #bottom>
				<view class="keyword-bc box mar d-a-center" style=""
					:style="isOpenPic?'height: 336rpx;':'height: 140rpx;'">
					<view class="mar " style="width: 90%;">
						<view class="d-j-bet">
							<view class="" style="width: 90%;height: 72rpx;">
								<uni-easyinput v-model="message" @confirm="sendMessage(message,0)" :confirmHold="true"
									:inputBorder="inputBorder" placeholder="请输入内容..." @focus="handleStatus"
									:placeholderStyle="placeholderStyle" :autoHeight="autoHeight"
									style="height: 72rpx;" />
							</view>
							<view class="d-center" v-if="message" @click="sendMessage(message,0)">
								发送
							</view>
							<view class="d-center" v-else @click="openPic()">
								<image class="qu-c rotate" :class="{rotate45: isOpenPic}"
									src="http://loto.oss-cn-shanghai.aliyuncs.com/email/b2bd099cb85a4f2e.png" mode="">
								</image>
							</view>
						</view>
						<view class="d-j-bet box" style="padding-top: 5%;" v-if="isOpenPic">
							<view class="" v-for="(item,index) in actionList" :key="index"
								@click="toSelectBottom(index)">
								<image class="qu-d" :src="item.icon" mode=""></image>
								<view class="d-j-center text-a co-k">
									{{item.name}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>

		</z-paging>
		<!-- 键盘 -->
		<uni-popup ref="selectServiceNurseOrder" :mask-click="false" type="bottom" background-color="#fff"
			@change="changeBottom">
			<view class="white-bac">
				<view class="d-j-bet d-a-center box" style="padding: 0 2% 0 2%;">
					<view class="qu-b " style="width: 20%;">
					</view>
					<view class="co-f text-b d-center " style="height: 100rpx;">
						请选择您要咨询的订单
					</view>
					<view class=" d-center qu-b" style="width: 20%;" @click="closeSelectServiceOrder">
						<image src="http://loto.oss-cn-shanghai.aliyuncs.com/email/e43962c4c75046cf.jpg" class="qu-b"
							mode=""></image>
					</view>
				</view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Yl" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
					<user-order actionName='发送' :orderNum='orderNum' :messageTemplate='1'
						@sendClickStatus='sendClickStatus' @sendOrderSize='sendOrderSize'></user-order>
					<uni-load-more :status="isOrderMore" :contentText='contentText' @clickLoadMore="pushMoreOrderList"
						v-if="orderSize!=0"></uni-load-more>
				</scroll-view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		userUrl
	} from '@/utils/options.js'
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue'
	import {
		debounce
	} from '@/common/js/common.js';
	import userOrder from '@/components/common/user-chat/user-order.vue'
	import userCard from '@/components/common/user-chat/user-card.vue'
	import callNavBar from '@/components/common/user-chat/call-nav-bar.vue'
	import {
		getAllQuestionTemplates,
		getChatHistory,
	} from '@/apis/chat/index.js'
	import socket from '@/common/js/socket.js'
	export default {
		components: {
			callNavBar,
			uniPopup,
			userOrder,
			userCard
		},
		data() {
			return {
				orderSize: 0,
				isOrderMore: 'more',
				isMore: 'more',
				contentText: {
					contentdown: "点击加载更多",
					contentrefresh: "正在加载中...",
					contentnomore: "没有更多数据了"
				},
				// 禁止底层滚动
				show: false,
				preImage: '',
				orderNum: 0,
				scrollToView: '',
				isOpenPic: false,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				autoHeight: true,
				inputBorder: true,
				content: '',
				placeholderStyle: 'fontSize:28rpx;color: #BAC1CE;fontWeight: 400;',
				actionList: [{
					icon: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/f5f0115c44a14714.png',
					name: '订单',
				}, {
					icon: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/951fa1acfc804f6f.png',
					name: '相册',
				}, {
					icon: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/873f730a228f4e97.png',
					name: '拍摄',
				}, ],
				menuList: [{
					icon: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/8f4c4b5c1d244f2c.png',
					name: '服务进度'
				}, {
					icon: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/3cc32d62e77749e3.png',
					name: '服务流程'
				}, {
					icon: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/a68b3c6e21624fe8.png',
					name: '发票中心'
				}, ],
				questionList: [],
				// 聊天记录的唯一标识
				chatId: '',
				message: '',
				// 判断是用户还是客服发的消息,0是客服，1是用户,2是护士
				socketTask: null,
				// 默认关闭
				isClose: true,
				// 等待时间
				timer: 10000,
				page: {
					page: 1,
					pageSize: 5
				},
				hisPage: {
					page: 1,
					pageSize: 10
				},
				msgList: [],
				avatarJson: '',
				kefuAvatar: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/b8ad69f2e0854d21.png',
				order: {},
				historyList: [],
				lastId: 0,
				receiverId: 81,
				proLen: 0,
				userAvatar: '',
				nick: '',
				// 连接是否关闭，默认打开，为true
				isSoketClose: true,
				oldScrollHeight: 0,
				changeScrollHeight: 0,
				newHeight: 0,
				isClickMore: false,
				userInfo: null,
			};
		},
		mounted() {},
		computed: {

		},
		onLoad(option) {
			this.init()
		},
		onShow() {
			this.toBottomView()
		},
		onReady() {},
		destroyed() {
			this.socketTask.close();
		},
		methods: {
			// 监听键盘高度改变，请不要直接通过uni.onKeyboardHeightChange监听，否则可能导致z-paging内置的键盘高度改变监听失效（如果不需要切换表情面板则不用写）
			// keyboardHeightChange(res) {
			// 	this.$refs.inputBar.updateKeyboardHeightChange(res);
			// },
			// // 用户尝试隐藏键盘，此时如果表情面板在展示中，应当通知chatInputBar隐藏表情面板（如果不需要切换表情面板则不用写）
			// hidedKeyboard() {
			// 	this.$refs.inputBar.hidedKeyboard();
			// },
			shouldDisplayTime(prevTimeStr, index) {
				if (this.msgList.length < 2 || index < 1 || this.msgList.length - index <= 1) return prevTimeStr ? true :
					false

				// 将时间字符串转换为Date对象  
				const prevTime = new Date(prevTimeStr);
				const currentTime = new Date(this.msgList[index + 1].updatedAt);

				// 计算时间差（毫秒）  
				const diff = currentTime - prevTime;
				return diff <= -60000;

			},
			// 禁止底层滚动
			changeBottom(e) {
				this.show = e.show
			},

			previewImage(image, index) {
				this.preImage = ''
				this.preImage = image
				console.log('preImage', this.preImage);
				uni.previewImage({
					current: index,
					urls: [image],
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {
						console.log(res)
					},
				})
			},
			handleStatus() {
				console.log('键盘已经打开');

				console.log(uni.getSystemInfoSync().platform);
				if (uni.getSystemInfoSync().platform === 'ios') {
					this.isOpenPic = false
				}
			},
			openPic() {
				this.isOpenPic = !this.isOpenPic
				this.toBottomView()
			},
			connectSocket() {
				console.log('调用连接');
				this.userInfo = uni.getStorageSync('userInfo')
				let that = this
				console.log(that.chatId);
				
				that.socketTask = socket.connectSocket(that.chatId + '/1')
				that.socketTask.onOpen(function(res) {
					console.log('websocket连接已打开！！！');
					that.getChatHistory()
					that.heart()
					that.isSoketClose = true
				})
				let msg = null
				that.socketTask.onMessage(function(res) {
					console.log('收到服务器内容：', res);
					msg = JSON.parse(res.data)
					if (msg) {
						that.$refs.paging.addChatRecordData({
							message: msg.message,
							roleType: msg.roleType,
							messageType: msg.messageType
						})
						that.toBottomView()
					}
					console.log(that.msgList);
				})
				that.socketTask.onError(function(res) {
					console.log('websocket连接打开失败，请检查---', res);
					// 进入重新连接
					that.reconnect()
				})
				that.socketTask.onClose((e) => {
					console.log('websocket连接关闭');
					that.isSoketClose = false
					clearInterval(that.timer)
					that.timer = ''

					if (!that.isClose) {
						that.reconnect()
					}
				})
			},
			async init() {
				let that = this
				console.log(that.$store.state.userInfo);
				that.chatId = that.$store.state.userInfo.id
				this.nick = this.$store.state.userInfo.nick
				that.connectSocket()
				// 自动回复问题答案list
				that.questionTem()
			},
			async getChatHistory() {
				console.log('调用接口');
				if (this.msgList.length > 0) {
					this.lastId = this.msgList[this.msgList.length - 1].id
				} else {
					this.lastId = 0
				}
				let res = await getChatHistory(this.lastId, this.hisPage.pageSize, this.receiverId, this.chatId)
				if (res.object.success) {
					this.proLen = res.object.object.length
					if (this.proLen != 0) {
						res.object.object.forEach((i, index) => {
							if (i.messageType == 1) {
								i.message = JSON.parse(i.message)
							}
						})
						// if (this.msgList.length > 0) {
						// 	this.msgList.splice(0, 0, ...res.object.object)
						// } else {
						// 	this.msgList = res.object.object
						// }
						this.$refs.paging.complete(res.object.object.reverse());
						console.log("数据", this.msgList)
						this.userAvatar = res.object.object[0].userAvatar
						// // 这个是加载新数据的方法后，更新scrolltop的
						// // if (this.newHeight > this.oldScrollHeight) {
						// this.$nextTick(function() {
						// 	console.log(222, '新', this.newHeight, '旧', this.oldScrollHeight);
						// 	this.changeScrollHeight = this.newHeight - this.oldScrollHeight
						// 	this.scrollTop = this.changeScrollHeight
						// 	console.log('高度变化了--', this.changeScrollHeight);
						// })
						// }
						// this.isClickMore = false
						if (this.isClickMore) {
							// this.$nextTick(function() {
							// 	this.scrollToView = 'msg' + (this.proLen - 1);
							// 	console.log('this.scrollToView', this.scrollToView);
							// 	this.isClickMore = false
							// })
						}
					}
					console.log(222, this.lastId, this.msgList.length);
					// if (this.lastId == 0 && this.msgList.length > 1) {
					// 	console.log('消息数目大于1之后自动下滑----');
					// 	this.$nextTick(function() {
					// 		this.scrollToView = 'msg' + (this.msgList.length - 1);
					// 	})
					// }
				}
			},
			// 这是那个计算高度变化的方法，随时可变
			scrollView(e) {
				// this.scrollTop = e.target.scrollTop
				// // newHeight=e.target.scrollHeight
				// if (this.isClickMore) {
				// 	this.newHeight = e.target.scrollHeight
				// 	// console.log('新----', this.newHeight);
				// } else {
				// 	this.oldScrollHeight = e.target.scrollHeight
				// 	// console.log('旧----', this.oldScrollHeight);
				// }
				// console.log(111, '新', this.newHeight, '旧', this.oldScrollHeight);
				// // 我需要在这步之前去更新scrollHeight,这个时候数据已经更新了，但是因为没有滑动，所以即使下面的写在这个方法里，也是不能更新的
				// if (this.newHeight != 0 && this.newHeight > this.oldScrollHeight) {
				// 	this.$nextTick(function() {
				// 		console.log(222, '新', this.newHeight, '旧', this.oldScrollHeight);
				// 		this.changeScrollHeight = this.newHeight - this.oldScrollHeight
				// 		this.scrollTop = this.changeScrollHeight
				// 		console.log('高度变化了--', this.changeScrollHeight);
				// 	})
				// }
			},
			// 这个是点击加载更多数据的方法
			pushMoreList(e) {
				if (this.isMore == 'loading') return
				let that = this
				that.isClickMore = true
				that.isMore = 'loading'
				// console.log(that.proLen);
				setTimeout(() => {
					if (that.proLen < 10) {
						that.isMore = 'noMore'
					} else if (that.proLen == 10) {
						that.isMore = 'more'
						let len = this.msgList.length
						// console.log(1119999, this.changeScrollHeight);
						if (len >= 10 && this.proLen == 10) {
							this.lastId = this.msgList[0].id
							this.proLen = 0
							this.getChatHistory()
							// console.log(9999, this.changeScrollHeight);
						} else {
							this.lastId = 0
							this.isMore = 'noMore'
						}
					}
				}, 1000)
			},
			pushMoreOrderList(e) {
				console.log('ooo', e);
				let that = this
				that.isOrderMore = 'loading'
				setTimeout(() => {
					// orderNum为订单页数
					console.log(11111, that.orderNum);
					console.log('拉到底部-----', e)
					if (that.orderSize == 10) {
						// 每一页的订单数量等于10，则加载更多数据
						that.orderNum++
						that.isOrderMore = 'more'
					} else if (that.orderSize < 10) {
						// 每一页的订单数量小于10，则暂无更多数据
						that.isOrderMore = 'noMore'
					}
					console.log(2222222222, that.orderNum);

				}, 2000)
			},
			sendOrderSize(val) {
				console.log('订单size----', val);
				this.orderSize = val
			},
			upper: function(e) {
				// let len = this.msgList.length
				// setTimeout(() => {
				// 	if (len >= 10 && this.proLen == 10) {
				// 		this.lastId = this.msgList[0].id
				// 		this.proLen = 0
				// 		this.getChatHistory()
				// 	} else {
				// 		this.lastId = 0
				// 		this.isMore = 'noMore'
				// 	}
				// }, 1000)
				// this.pushMoreList()
			},
			lower: function(e) {
				let that = this
				console.log(11111, that.orderNum);
				console.log('拉到底部-----', that.orderSize)
				that.isOrderMore = 'loading'
				setTimeout(() => {
					// orderNum为订单页数
					console.log(11111, that.orderNum);
					console.log('拉到底部-----', e)
					if (that.orderSize == 10) {
						// 每一页的订单数量等于10，则加载更多数据
						that.orderNum++
						that.isOrderMore = 'more'
					} else if (that.orderSize < 10) {
						// 每一页的订单数量小于10，则暂无更多数据
						that.isOrderMore = 'noMore'
					}
					console.log(2222222222, that.orderNum);

				}, 2000)

				console.log(2222222222, that.orderNum);

			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
				// console.log(333, this.old.scrollTop)
			},

			toBottomView() {
				// console.log(this.scrollToView);
				// this.$nextTick(function() {
				// 	this.scrollToView = 'targetView';
				// })
				// this.scrollToView = 'msg' + (this.msgList.length - 1);
				// console.log(222, this.scrollToView);
			},
			async questionTem() {
				let that = this
				if (that.questionList.length < 5) {
					that.page.page = 1
				} else {
					that.page.page++
				}
				let res = await getAllQuestionTemplates(1, that.page.page, that.page.pageSize)
				if (res.success) {
					that.questionList = res.object
				}
			},
			// 进入重新连接
			reconnect() {
				console.log('进入断线重新连接');
				this.socketTask = null
				this.connectSocket()
			},
			// 发送消息
			sendMessage(msg, type) {
				let that = this
				uni.getNetworkType({
					success: function(res) {
						const networkType = res.networkType;
						if (networkType === 'none') {
							uni.showToast({
								title: '请检查网络是否连接！',
								icon: 'none'
							});
						} else {
							socket.sendSocketMessage(msg, that.socketTask, type, 2, 1)
							// let info = {
							// 	message: msg,
							// 	roleType: 2,
							// 	messageType: type,
							// }
							let info = {
								message: msg,
								messageType: type,
								roleType: 2,
								senderId: that.chatId,
								receiverId: 81,
							}
							
							if (type == 1) {
								info.message = JSON.parse(info.message)
							}
							console.log("订单",info)
							that.$refs.paging.addChatRecordData(info)
								console.log("消息列表",that.msgList)
							that.message = ''
							that.toBottomView()
							// that.$nextTick(()=>{
							// 	console.log("消息列表",that.msgList)
							// })
						}
					}
				});
			},
			heart() {
				let that = this
				clearInterval(this.timer)
				this.timer = ''
				let msg = {
					"type": "heartbeat"
				}
				this.timer = setInterval(() => {
					that.sendSocketMessage(JSON.stringify(msg)).then(res => {
						console.log('心跳成功');
					}).catch(res => {
						console.log('发送失败', res);
					})
				}, 222000000)
			},
			toSelectBottom(index) {
				let that = this
				if (index == 0) {
					this.toChangeOrder(0)
				} else {
					let sourceType = []
					if (index == 1) {
						sourceType = ['album']
					} else if (index == 2) {
						sourceType = ['camera']
					}
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: sourceType, //从相册选择
						success: function(res) {
							// console.log(JSON.stringify(res.tempFilePaths))					
							let tempFiles = res.tempFilePaths;
							let baseUrl = ''
							if (process.env.NODE_ENV === 'development') {
								// #ifndef H5
								baseUrl = userUrl
								// #endif
								// #ifdef H5
								baseUrl = '/api'
								// #endif
							} else if (process.env.NODE_ENV === 'production') {
								// 生产环境:正式地址
								baseUrl = userUrl
							}
							let url = baseUrl + '/user/otherOssController/ossUpload'
							// #ifndef MP-WEIXIN
							uni.uploadFile({
								url: url,
								filePath: tempFiles[0],
								name: 'file', // 在FormData 中文件对应的属性名
								fileType: 'image',
								header: {
									token: that.$store.state.token
								},
								success: r => {
									console.log(JSON.parse(r.data));
									let info = JSON.parse(r.data).object
									that.sendMessage(info, 2)
								},
								fail: err => {},
								complete: complete => {}
							})
							return
							// #endif
							// #ifdef MP-WEIXIN
							uploadImage(tempFiles[0], 'user/',
								result => {
									that.head = result;
									console.log(result, '上传头像的结果是------');
									let users = that.$store.state.userInfo
									users.avatarJson = result //更新头像
									that.sendMessage(result, 2)
								}, error => {

								})
							// #endif
						},
						complete: function(res) {
							that.toBottomView()
						}
					});

				}
			},
			// 点击发送状态是否成功
			sendClickStatus(val) {
				// console.log('点击发送状态是否成功', val);
				if (val) {

					this.sendMessage(val, 1, this.socketTask, 1)
					this.closeSelectServiceOrder()
					this.isOpenPic = false
				}
			},
			closeSelectServiceOrder() {
				this.$refs.selectServiceNurseOrder.close()
				this.toBottomView()
			},

			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			toChangeOrder(value) {
				this.orderNum = 0
				this.$refs.selectServiceNurseOrder.open()
			},
			toActionName(index) {
				if (index == 0) {
					// 服务进度
					uni.navigateTo({
						url: '/pages/customerService/service-list'
					})
				} else if (index == 1) {
					// 服务流程
					uni.navigateTo({
						url: '/pages/customerService/order-process'
					})
				} else if (index == 2) {
					uni.showToast({
						icon: 'none',
						title: '新功能，敬请期待～'
					})
				}
			},

		}
	};
</script>

<style scoped lang="less">
	.scroll-Y {
		height: 97vh;
	}

	.scroll-Yl {
		height: 57vh;
	}

	.tl {
		font-size: 28rpx;
		color: #333333;
	}

	.sty1 {
		height: 360rpx;
	}

	.sty2 {
		height: 160rpx;
	}

	.time-c {
		height: 40rpx;
		background: rgba(0, 0, 0, 0.1);
		border-radius: 6rpx;
		font-size: 20rpx;
		font-weight: 400;
		width: 232rpx;
		margin: 10rpx 0 10rpx 0;
	}

	.tll {
		font-size: 28rpx;
		color: #666666;
	}

	.menu-l {
		width: 98%;
		height: 194rpx;
	}

	.icon-img {
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.87);
	}

	.menu-ll {
		width: 98%;
		// height: 670rpx;
	}

	.menu-t {
		font-size: 32rpx;
		color: #3E3E3E;
	}

	.menu-tl {
		border-bottom: 1rpx solid beige;
	}

	.menu-c {
		font-size: 24rpx;
		color: #438AFF;
	}

	.order-s {
		width: 98%;
		height: 220rpx;
	}

	.chat-bc {
		// background-image: url('http://loto.oss-cn-shanghai.aliyuncs.com/email/338c33478a854a02.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.rotate {
		transition: transform 0.8s ease;
		/* 旋转动画效果 */
		transform: rotate(0deg);
		/* 旋转45度 */
	}

	.rotate45 {
		transform: rotate(45deg) !important;
		/* 旋转45度 */
	}

	.keyword-bc {
		// position: fixed;
		// bottom: 0;
		// left: 0;
		// width: 100%;
		background: #F6F6F6;
		transition: 0.2s ease 0s;
		// box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
	}

	.msg {
		margin: 12rpx 0rpx;
	}

	.msg-box {
		max-width: 480rpx;
		margin: 0 26rpx;
		padding: 20rpx 32rpx;
		font-size: 28rpx;
		// color: #FFFFFF;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		white-space: normal;
		/* 允许换行 */
		overflow-wrap: break-word;
		/* 在必要时单词内部可以断行 */
	}

	.first-box {
		height: 40rpx;
		line-height: 40rpx;
		background: rgba(0, 0, 0, 0.1);
		border-radius: 6rpx;
		font-size: 24rpx;
		font-weight: 400;
		padding: 0 12rpx;
		margin-bottom: 24rpx;
	}
</style>